<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JS实现简单的选项卡</title>
  <style>
  	button {
  	  height: 38px;
      line-height: 38px;
      font-size: 14px;
      color: #fff;
      background-color: #009688;
      border: 1px solid transparent;
      outline: 0;
  	}
    div {
      width: 300px;
      height: 200px;
      border: 1px solid red;
      display: none;
    }
  </style>
</head>
<body>
  <button class="active">网站设置</button>
  <button>用户管理</button>
  <button>权限分配</button>
  <div class="box" style="display: block;">111</div>
  <div class="box">222</div>
  <div class="box">333</div>
  <script>
    const btns = document.getElementsByTagName('button');
    const box = document.getElementsByClassName('box');
    for(let i=0; i<btns.length; i++) {
      btns[i].onclick = function(){
      	for(let j=0; j<btns.length; j++) {
      		box[j].style.display = 'none';
      	}
        box[i].style.display = 'block';
      }  
    }
  </script>
</body>
</html>